<template>
  <view class="recommend-container">
    
    <view class="recommend">
      <navigator 
        class="recommend-item" 
        v-for="item in activityList.records" 
        :key="item.id"
        :url="`/pages/voluntary/voluntaryDetail/voluntaryDetail?id=${item.activityId}`"
      >
        <view class="activity-image-container">
          <image class="image" mode="aspectFill" :src="item.activityImage"></image>
          <!-- 状态标签 -->
          <view class="status-tag" :class="getStatusClass(item.status)">
            {{ getStatusText(item.status) }}
          </view>
        </view>
        
        <!-- 活动时间 -->
        <view class="activity-time">
          <text class="time-text">{{ formatDateTime(item.startTime) }}至{{ formatDateTime(item.endTime) }}</text>
        </view>
        
        <!-- 活动标题 -->
        <view class="name">{{ item.title }}</view>
        
        <!-- 活动类型 -->
        <view class="activity-type">
          {{ getActivityTypeName(item.activityType) }}
        </view>
      </navigator>
    </view>
    <view class="loading-text"> {{ finish ? '没有更多啦~' : '正在加载...' }} </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getActivityAPI } from '@/services/voluntary'

// 活动类型选项（与addvoluntary.vue中保持一致）
const activityTypes = [
  { id: 1, name: '监测' },
  { id: 2, name: '维护' },
  { id: 3, name: '清洁' },
  { id: 4, name: '宣传' }
]

// 活动状态映射
const statusMap = {
  1: '招募中',
  2: '进行中',
  3: '已完成'
}

const finish = ref(false) // 是否加载完成
const searchKeyword = ref('') // 搜索关键字

const activityList = ref({
  records: [],
  total: 0
})

const pageParams = ref({
  page: 1,
  pageSize: 10,
  keyword: '' // 添加keyword参数
})

// 获取活动列表
const getActivityList = async () => {
  if (finish.value) {
    return uni.showToast({
      title: '没有更多啦~',
      icon: 'none'
      })
  }
  const res = await getActivityAPI(pageParams.value)
  // 数组追加
  activityList.value.records.push(...res.data.records)
  // 判断是否还有下一页
  if (res.data.records.length >= pageParams.value.pageSize) {
    pageParams.value.page++
  } else {
    finish.value = true
  }
}

// 处理搜索
const handleSearch = () => {
  // 重置分页参数
  pageParams.value.page = 1
  pageParams.value.keyword = searchKeyword.value
  // 清空当前列表
  activityList.value.records = []
  finish.value = false
  // 重新获取数据
  getActivityList()
}

// 重置数据
const resetData = () => {
  activityList.value.records = []
  pageParams.value.page = 1
  pageParams.value.keyword = ''
  searchKeyword.value = ''
  finish.value = false
}

// 获取活动类型名称
const getActivityTypeName = (typeId) => {
  const type = activityTypes.find(item => item.id === typeId)
  return type ? type.name : '未知类型'
}

// 获取状态文本
const getStatusText = (status) => {
  return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 1: return 'status-recruiting' // 招募中
    case 2: return 'status-processing' // 进行中
    case 3: return 'status-finished' // 已完成
    default: return ''
  }
}

// 格式化日期时间显示
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${month}-${day} ${hours}:${minutes}`
}

defineExpose({
  resetData,
  getMore: getActivityList
})

onMounted(() => {
  getActivityList()
})
</script>

<style lang="scss">
:host {
  display: block;
}

/* 搜索框样式 */
.search-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.search-box {
  display: flex;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-input {
  flex: 1;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.search-button {
  background-color: #2a9d8f;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;

  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 推荐 */
.recommend-container {
  display: flex;
  flex-direction: column;
}
.recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;

  .recommend-item {
    width: calc(50% - 10rpx);
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
  }

  .image {
    width: 100%;
    height: 304rpx;
    border-radius: 8rpx;
  }

  .status-tag {
    position: absolute;
    top: 30rpx;
    left: 20rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
  }

  .status-recruiting {
    background-color: #ff6b6b;
  }

  .status-processing {
    background-color: #4ecdc4;
  }

  .status-finished {
    background-color: #888;
  }

  .activity-time {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #ffb347;
  }

  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: bold;
  }

  .activity-type {
    font-size: 24rpx;
    color: #2a9d8f;
    padding: 8rpx 12rpx;
    background-color: #e8f4f3;
    border-radius: 6rpx;
    display: inline-block;
    margin-top: 10rpx;
  }

  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }

  .small {
    font-size: 80%;
  }
}

// 加载提示文字
.loading-text {
   text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  align-self: center;
}
</style>